<template>
    <div>
        <el-form :model="form" :rules="rules" label-position="right" ref="form" label-width="160px">

            <!--单行录入示例-->
            <el-form-item label="分类名称：" prop="name">
                <el-col :span="8">
                    <el-input v-model="form.name" placeholder="请输入分类名称"></el-input>
                </el-col>
            </el-form-item>

            <!--提交按钮-->
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
                <!--<el-button @click="testBtn()">测试用</el-button>-->
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'

    export default {
        //数据源
        data() {
            return {
                //验证规则
                rules: {
                    name: [
                        {required: true, message: '请输入分类名称', trigger: 'blur'}
                    ],
                },
                props: {
                    value: 'value'
                },
            }
        },
        //初始化函数
        mounted() {
        },
        //计算属性
        computed: {
            ...mapState({
                form: state => state.AddDownloadCategoryModule.form,
            })
        },
        //组件方法
        methods: {
            // ...mapMutations()
            //添加按钮
            submitForm(form) {

                this.$refs[form].validate((valid) => {

                    if (valid) {

                        var params = {
                            cdc_name:    this.form.name,
                        }

                        this.$myLoading.startLoading()
                        this.$http.postHttp(
                            this.$API.cmsDownloadCategoryAdd,
                            params,
                            rs => {
                                this.$myLoading.endLoading();
                                this.$myPop.SuccessMessage();
                                this.resetForm();
                            }
                        )


                    }

                })

            },
            //重置按钮
            resetForm() {
                this.$store.commit('AddDownloadCategoryModule/clearForm');
            },
            //测试用
            testBtn() {
                var that = this
                //回调函数
                this.$selectImageBox({
                    selectImageValue(item){
                    	console.log('------回调！？？！？！')
                    	console.log(item)
                    }
                })
            },
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~PUBLIC_CSS';
</style>